<template>
  <div class="home">
    <div class="component_groups" v-if="!loading">
      <div
        class="component_item"
        v-for="(item, index) in components"
        :key="index"
      >
        <component
          :is="item.component"
          :data="commonData"
          @event="commonEvent"
        ></component>
      </div>
    </div>
    <Loading v-else></Loading>
  </div>
</template>
<script>
export default {
  name: "Home",
  components: {
    Loading: () =>
      import(
        /* webpackChunkName:'loading' */ "../components/loading/loading.vue"
      ),
  },
  data() {
    return {
      loading: false,
      components: [],
      commonData: {
        a: 2,
      },
    };
  },
  created() {
    if (!this.loading) {
      this.loading = true;
      this.$store.dispatch("getHomePageData").then((v) => {
        this.components = [
          {
            name: "tab",
            component: () =>
              import(/* webpackChunkName:'tab' */ "../components/tab/tab.vue"),
          },
          {
            name: "dialog",
            component: () =>
              import(
                /* webpackChunkName:'dialog' */ "../components/dialog/dialog.vue"
              ),
          },
          {
            name: "list",
            component: () =>
              import(
                /* webpackChunkName:'list' */ "../components/list/list.vue"
              ),
          },
        ];
        this.loading = false;
      });
    }
  },
  methods: {
    commonEvent(name, value) {
      this.commonData[name] = value;
    },
  },
};
</script>
<style lang="less">
.home {
}
</style>
